<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>首次页面</title>
	    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	</head>
	<style type="text/css">
		body,html{
			height: 100%;
			/* position: relative; */
		}
		html{
       font-size: 26.67vw;
		}
		 body,p,dl,dd,ul,ol,li,div,h1,h2,h3,h4,h5,h6,form,input,table,tr,td{
		margin:0;
		padding:0;
	} 
		body{
			/* padding-bottom: 0.5rem; */
		}
	header{
		width: 100%;
		height: 2.715rem;
		background: url(img/boss-1.jpg);
		background-size:100%  2.715rem ;
		text-align: center;
		position: relative;
	}
	input:nth-child(1){
		display: inline-block;
		width:3.5rem ;
		height: 0.53rem;
		background: #ffffff;
		border: transparent;
		border-radius:0.265rem ;
		text-indent: 0.25rem;
		outline: none;
		margin: 1.9rem  auto;
		font-size: 16px;
	}
	input:nth-child(2){
		display: inline-block;
		width:0.5rem ;
		height: 0.53rem;
		background: #ffffff;
		border: transparent;
		position: absolute;
		left: 2.9rem;
		font-size: 16px;
		top: 0;
		outline: none;
		color: #5bd3c7;
		margin: 1.9rem  auto;
	}
	ul{
		width: 100%;
		/*height: 2.5rem;*/
		border-bottom: 1px #f8f8f8 solid;
		/*margin-bottom: 100px;*/
	}
	ul li{
		width: 100%;
		height: 0.6rem;
		line-height: 0.6rem;
		margin-bottom: 0.2rem;
		
		/*text-indent: 0.2rem;*/
	}
	ul li:after{
		height: 0;
		content: "";
		display: block;
		overflow: hidden;
		visibility: hidden;
		clear: both;

	}
	li img{
		display: inline-block;
		margin-left: 0.2rem;
		width: 0.53rem;
		height: 0.53rem;
	}
	li span{
		display: inline-block;
		font-size: 20px;
		font-weight: 700;
		transform: translateY(-0.18rem);
	}
	li a{
		display: inline-block;
		float: left;
		margin-left: 0.2rem;
		font-size:16px ;
		padding: 0px 10px;
		background: #f4f8fb;
		color: #8a8f95;
		border-radius:50%;
	   text-decoration: none;
	}
	.float_clear{
		height: 0.5rem;
		width: 100%;
	}
.float_box{
	display: flex;
	width: 100%;
	height: 0.8rem;
	background: #1bceca;
	justify-content: space-between;
	position: fixed;
	bottom: 0;
}
.float_box img{
  width: 1.25rem;
  height:0.6rem;
  display: inline-block;
  margin-left: 10px;
  margin-top: 10px;
}
.float_box a{
	text-decoration: none;
    color: #1dcbc9;
	display: inline-block;
	width: 1rem;
	height:0.5rem;
	border-radius:0.25rem;
	background: #ffffff;
	font-size: 0.15rem; 
	line-height: 0.5rem;
	text-align: center;
	margin-right: 10px;
	margin-top: 13px;
	}
	</style>
	<body>
		<header>
			<form style="100px;" action="" method="post">
		        <input type="text" name="" id="" value="" placeholder="搜索职位/公司"/>
				<input type="submit" value="搜索"/>
			</form>
		</header>
		<section>
			<ul class="house">
				<li><img src="img/x-1.jpg"/> <span id="">
					技术
				</span></li>
				<li><a href="java.html">Java</a>
				<a href="">PHP</a>
				<a href="">Web前端</a>
				<a href="">C++</a>
			</li>
				<li>
					<a href="">数据挖掘</a>
					<a href="">Android</a>
					<a href="">Pytjon</a>
				</li>
				<li><a href="">iOS</a></li>
			
			</ul>
			<ul class="house">
				<li><img src="img/x-2.jpg"/> <span id="">
					产品
				</span></li>
				<li><a href="">产品经理</a>
				<a href="">产品助理</a>
				<a href="">网页产品经理</a>
				</li>
				<li>
					<a href="">数据产品经理</a>
				</li>
			</ul>
			<ul class="house">
				<li><img src="img/x-3.jpg"/> <span id="">
					设计
				</span></li>
				<li><a href="">UI设计师</a>
				<a href="">平面设计师</a>
				<a href="">Android</a>
				<!--<a href="">数据挖掘</a></li>-->
				</li>
				<li>
				<a href="">交互设计师</a>
					<a href="">设计总监</a>
					<!--<a href="">Pytjon</a>-->
					
					<!--<a href="">iOS</a>-->
				</li>
			</ul>
			<ul class="house">
				<li><img src="img/x-4.jpg"/> <span id="">
					市场
				</span></li>
				<li><a href="">市场营销</a>
				<a href="">商务渠道</a>
				<a href="">品牌公关</a>
				<!--<a href="">数据挖掘</a></li>-->
				</li>
				<li>
					<a href="">商场总监</a>
					<a href="">策划经理</a>
					<a href="">活动策划</a>

				</li>

				<li>
					<a href="">SEO</a>
					<a href="">SEM</a></li>
			</ul>
			<ul class="house">
				<li><img src="img/x-5.jpg"/> <span id="">
					运营
				</span></li>
				<li><a href="">用户运营</a>
				<a href="">产品运营</a>
				<a href="">新媒体运营</a>
				<!--<a href="">数据挖掘</a></li>-->
				</li>
				<li>
					<a href="">运营总监</a>
					<a href="">商家运营</a>
					<a href="">电商运营</a>
				</li>

				<li>
					<a href="">编辑</a>
					<a href="">客服经理</a>
				</li>
			</ul>
			<ul class="house">
				<li><img src="img/x-7.jpg"/> <span id="">
					智能/高级管理
				</span></li>
				<li><a href="">人力资源</a>
				<a href="">行政</a>
				<a href="">财务</a>
				<a href="">会计</a></li>
				</li>
				<li>
					<a href="">HRBP</a>
					<!--<a href="">商家运营</a>-->
					<!--<a? href="">电商运营</a>-->
				</li>
			</ul>
			<ul class="house">
              <li style="font-size: 12px;color: #9b9ea5;text-align: center;line-height: 0.2rem;">违法和不良信息举报邮箱：jubao@kanzhun.com       <br />     企业服务热线和举报投诉：400 065 5799</li>
			</ul>
		</section>
		<div class="float_clear">
			
		</div>
	 	<div class="float_box">
		      <img src="img/boss.jpg"/>
		      <a href="zhuce.html">立即注册</a>
		</div>
	</body>
	
</html>
